<template>
    <div>
        <tab :line-width=2 active-color='#fc378c' v-model="index">
            <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item"
                      :key="index">{{item}}
            </tab-item>
        </tab>
        <swiper v-model="index" height="100px" :show-dots="false">
            <swiper-item v-for="(item, index) in list2" :key="index">
                <div class="tab-swiper vux-center">
                    <group>
                        <cell title="Total" value="￥1024"></cell>
                        <cell-form-preview :list="list[item]"></cell-form-preview>
                    </group>
                </div>
            </swiper-item>
        </swiper>
    </div>
</template>


<script>
    import {Tab, TabItem, Sticky, Divider, XButton,Cell,Group, Swiper, SwiperItem,CellFormPreview} from 'vux'
    const list = () => ['精选', '美食', '电影']

    export default {
        components: {
            Tab,
            TabItem,
            Sticky,
            Divider,
            XButton,
            Swiper,
            SwiperItem,
            CellFormPreview,
            Group,
            Cell
        },
        data () {
            return {
                list2: list(),
                demo2: '美食',
                list: {
                    '美食': [{
                        label: 'Apple',
                        value: '3.29'
                    }, {
                        label: 'Banana',
                        value: '1.04'
                    }, {
                        label: 'Fish',
                        value: '8.00'
                    }],
                    '精选': [{
                        label: '精选Apple',
                        value: '3.29'
                    }, {
                        label: '精选Banana',
                        value: '1.04'
                    }, {
                        label: '精选Fish',
                        value: '8.00'
                    }],
                    '电影': [{
                        label: '电影Apple',
                        value: '3.29'
                    }, {
                        label: '电影Banana',
                        value: '1.04'
                    }, {
                        label: '电影Fish',
                        value: '8.00'
                    }]
                },
                index: 0,
                getBarWidth: function (index) {
                    return (index + 1) * 22 + 'px'
                }
            }
        },
        methods: {
            onItemClick (index) {
                console.log('on item click:', index)
            },
            addTab () {
                if (this.list2.length < 5) {
                    this.list2 = list().slice(0, this.list2.length + 1)
                }
            },
            removeTab () {
                if (this.list2.length > 1) {
                    this.list2 = list().slice(0, this.list2.length - 1)
                }
            },
            next () {
                if (this.index === this.list2.length - 1) {
                    this.index = 0
                } else {
                    ++this.index
                }
            },
            prev () {
                if (this.index === 0) {
                    this.index = this.list2.length - 1
                } else {
                    --this.index
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '~vux/src/styles/1px.less';
    @import '~vux/src/styles/center.less';

    .box {
        padding: 15px;
    }

    .active-6-1 {
        color: rgb(252, 55, 140) !important;
        border-color: rgb(252, 55, 140) !important;
    }

    .active-6-2 {
        color: #04be02 !important;
        border-color: #04be02 !important;
    }

    .active-6-3 {
        color: rgb(55, 174, 252) !important;
        border-color: rgb(55, 174, 252) !important;
    }

    .tab-swiper {
        background-color: #fff;
        height: 100px;
    }
</style>